<template>
  <div>
       <!-- 第一排  -->
    <div class="topnav">
        <!-- 版心 -->
        <div class="container">
            <!-- 搜索栏 -->
            <div class="topnav-searchbox">
                <!-- 左 -->
                <img src="picture/logo.png" alt="" class="topnav-logo">
                <span class="topnav-wyy "><a href="#">网易云音乐</a></span>
                <div class="topnav-nav">
                    <div :class="{'active':$route.path=='/' || $route.path === '/songseets' || $route.path === '/topList'}">
                    <router-link to="/">发现音乐</router-link>
                        <div class="topnav-nav-xsj" v-show="$route.path=='/'"></div>
                    </div>
                    <div :class="{'active':$route.path=='mymusic/playlist'}"><router-link to="/mymusic">我的音乐</router-link>
                    <div class="topnav-nav-xsj" v-show="$route.path=='/mymusic'"></div></div>
                    <div><a href="friend.html">朋友</a></div>
                    <div><a href="shopping.html">商城</a></div>
                    <div><a href="musician.html">音乐人</a></div>
                    <div class="topnav-nav-last">
                        <a href="client.html">下载客户端</a>
                        <div class="topnav-nav-hot">HOT</div>
                    </div>
                </div>

                <!-- 右 -->
                <p><a href="#" @click="$store.state.isLoginShow = true">登录</a></p>
                <a href="#">
                    <div class="topnav-nav-right">创作者中心</div>
                </a>
                <div class="topnav-nav-input">
                    <i class="iconfont">&#xe6e7</i>
                    <input        
                      v-model="searchText"
                      type="text"
                      placeholder="音乐/视频/电台/用户"
                      class="search"
                      onfocus="this.placeholder=''"
                      @focus="openSearch"
                      onblur="this.placeholder='音乐/视频/电台/用户'"
                      @blur="closeSearch"
                      @keyup.enter="Search"/>
                      <div class="u-lst clearfix" style="display:none" ref="ulst">
                        <div class="schlist">
                          <p class="note">
                            <a class="underline">搜索"{{searchText}}"相关用户&gt;</a>
                          </p>
                          <div class="rap clearfix">
                            <div class="item clearfix">
                              <ul class="clearfix" v-for="item,index in searchList.order" :key="index">
                                <div class="hd clearfix">
                                  <i class="songs" v-show="item=='songs'"></i>
                                  <i class="artists" v-show="item=='artists'"></i>
                                   <i class="albums" v-show="item=='albums'"></i>
                                  <i class="playlists" v-show="item=='playlists'"></i>  
                                  <span v-show="item=='songs'">单曲</span>
                                  <span v-show="item=='artists'">歌手</span>
                                  <span v-show="item=='albums'">专辑</span>
                                  <span v-show="item=='playlists'">歌单</span>
                                </div>
                                <div class="odd clearfix">
                                  <li v-for="attr,index in searchList[`${item}`]" :key="index">
                                    <i class="over">
                                      {{attr.name}}-
                                      <span v-show="item=='songs'" v-for="t,index in attr.artists" :key="index">{{t.name}} </span>
                                      <span v-if="item == 'albums'">{{attr.artist.name}}</span>
                                    </i>
                                  </li>
                                </div>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                </div>
            </div>
        </div>
    </div>
        <!-- 第二排 推荐 -->
    <div class="recommend " id="id-top" v-if="$route.path === '/' || $route.path === '/topList' || $route.path === '/songseets' || $route.path === '/djmusic' || $route.path === '/singer'">
        <!-- 版心 -->
        <div class="container">
            <div class="recommend-box">
                <ul>
                    <li @click="$router.push('/')" :class="{'active':$route.path=='/'}">
                    <a href="#">推荐</a>
                    </li>
                    <li @click="$router.push('/topList?id=19723756')" :class="{'active':$route.path=='/topList'}">
                    <a href="#">排行榜</a>
                    </li>
                    <li @click="$router.push('/songseets')" :class="{'active':$route.path=='/songseets'}"><a href="#" >歌单
                        </a>
                    </li>
                    <li @click="$router.push('/djmusic')" :class="{'active':$route.path=='/djmusic'}">
                    <a href="#">主播电台</a></li>
                    <li @click="$router.push('/singer')" :class="{'active':$route.path=='/singer'}"><a href="#">歌手</a></li>
                    <li @click="$router.push('/newdisc')" :class="{'active':$route.path=='/newdisc'}"><a href="#">新碟上架</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="recommend2" v-else></div>
    <Login/>
  </div>
</template>

<script>
import {reqSerachSuggestApi} from "@/request/api"
import Login from "./Login.vue";
export default {
  data() {
    return {
      // 搜索内容
      searchText:'',
      // 搜索建议返回的结果
      searchList:{},
    };
  },
  components: {
    Login,
  },methods:{
    // 获取搜索建议
    async getSearchSuggest(){ 
      reqSerachSuggestApi(this.searchText).then(res=>{
        this.searchList = res.data.result
      })
    },
    // 打开搜索框
    openSearch(){
      if(this.searchText != ''){
        this.$refs.ulst.style.display = 'block'
      }
    },
    // 关闭搜索框
    closeSearch(){
        setTimeout(() => {
          this.$refs.ulst.style.display='none';  
        }, 100);
    },
    Search() {
      this.$refs.ulst.style.display = 'none';
      this.$router.push({
        path:'/sousuo',
        query:{
          keywords:this.searchText,
        }
      })
    },
  }
};
</script>
 
<style lang = "less" scoped>
.topnav-searchbox {
  width: 100%;
  height: 86px;
  background-color: #242424;
}

.topnav {
  background-color: #242424;
  border-bottom: 1px solid #202020;
  position: relative;
}

.topnav-logo {
  float: left;
  margin-top: 20px;
}

.topnav-wyy a {
  line-height: 86px;
  font-size: 22px;
  color: #fff;
}

.topnav-wyy {
  float: left;
  margin-left: 8px;
  margin-right: 18px;
}

.topnav-nav {
  float: left;
}

.topnav-searchbox div {
  float: left;
}

.topnav-searchbox div a {
  font-size: 14px;
  color: #cccccc;
  line-height: 86px;
  padding-left: 18px;
  padding-right: 18px;
  box-sizing: border-box;
}

.topnav-nav div:hover a {
  background-color: #000000;
}

.topnav-nav div:hover a {
  color: #ffffff;
}

.topnav-nav > div {
  position: relative;
}
.topnav-nav .active {
  background-color: #000000;
}

.topnav-nav div:nth-child(1) a {
  color: #ffffff;
}

.topnav-nav-xsj {
  position: absolute;
  font-size: 0;
  border: 8px solid #c00014;
  border-left: 8px solid transparent;
  border-top: 8px solid transparent;
  border-right: 8px solid transparent;
  top: 71px;
  left: 38px;
}

.topnav-nav-last {
  position: relative;
}

.topnav-nav-hot {
  position: absolute;
  width: 26px;
  height: 14px;
  background-color: #c20c0c;
  border: 1px solid transparent;
  box-sizing: border-box;
  border-radius: 10px;
  top: 26px;
  left: 100px;
  font-size: 8px;
  line-height: 14px;
  text-align: center;
  color: #f5d9d9;
}

/* 右 */
.topnav-searchbox p {
  float: right;
  margin-right: 26px;
  font-size: 12px;
  line-height: 86px;
  margin-left: 18px;
}

.topnav-searchbox p a {
  color: #787878;
}

.topnav-searchbox p a:hover {
  color: #999999;
}

.topnav-searchbox a {
  float: right;
  color: #cccccc;
}

.topnav-nav-right {
  margin-top: calc((86px - 32px) / 2);
  width: 90px;
  height: 32px;
  border: 1px solid #4f4f4f;
  line-height: 32px;
  border-radius: 20px;
  box-sizing: border-box;
  text-align: center;
}

.topnav-searchbox a:hover div {
  border: 1px solid #cccccc;
  color: #ffffff;
}

.topnav-searchbox .topnav-nav-input {
  float: right;
  width: 158px;
  height: 32px;
  margin-top: calc((86px - 32px) / 2);
  line-height: 32px;
  border: 1px solid transparent;
  border-radius: 32px;
  box-sizing: border-box;
  background-color: #ffffff;
  margin-right: 16px;
}

.topnav-nav-input i {
  float: left;
  margin-left: 8px;
}

.topnav-nav-input input {
  float: left;
  width: 130px;
  height: 18px;
  color: #9b9b9b;
  border: 0;
  margin-top: calc((32px - 18px) / 2);
}
      .u-lst{
        position: absolute;
        top: 59px;
        width: 240px;
        z-index: 120;
        left: 980px;
        box-sizing: border-box;
        border: 1px solid #bebebe;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 4px 7px #555;
        text-shadow: 0 1px 0 rgb(255 255 255 / 90%);
        .schlist{
          width: 100%;
          .note{
            width: 100%;
            padding: 11px 10px;
            height: 39px;
            border-bottom: 1px solid #979797;
            a{
              color: #000;
              &:hover{
                color: #000;
              }
            }
          }
          .rap{
            width: 100%;
            .item{
              width: 100%;
              display: block;
              ul{
                width: 100%;
                .hd{
                  float: left;
                  width: 63px;
                  padding: 10px 0 0 10px;
                  i{
                    float: left;
                    margin: 2px 4px 0 0;
                    width: 14px;
                    height: 15px;
                    background: url('@/assets/image/toplist/icon.png');
                  }
                  .songs{
                    background-position: -35px -300px;
                  }
                  .artists{
                    background-position: -50px -300px;
                  }
                  .albums{
                    background-position: -35px -320px;
                  }
                  .playlists{
                    background-position: -50px -320px;
                  }
                  span{
                    line-height: 15px;
                    text-align: left;
                    font-size: 12px;
                  }
                }
                .odd{
                  float: left;
                  width: 173px;
                  background: #f9f8f8;
                  margin-left: 2px;
                  margin-top: 0px;
                  padding: 6px 0 5px;
                  border-top: 1px solid #e2e2e2;
                  border-left: 1px solid #e2e2e2;
                  li{
                    width: 100%;
                    
                    i{
                      padding-left: 10px;
                      display: block;
                      height: 24px;
                      color: #000;
                      line-height: 24px;
                      &:hover{
                        color: #000;
                        background-color: #ddd;
                        cursor: pointer;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
/* 第二排 推荐 */
.recommend {
  width: 100%;
  height: 34px;
  border-bottom: 4px solid #a40011;
  background-color: #c20c0c;
}
.recommend2 {
  width: 100%;
  height: 10px;
  background-color: #c20c0c;
}
.recommend-box {
  margin-left: 198px;
  font-size: 12px;
}

.recommend-box li {
  float: left;
  height: 20px;
  border: 1px solid transparent;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 0 13px;
  margin: 7px 17px 0;
  line-height: 20px;
}

.recommend-box .active {
  background-color: rgba(0, 0, 0, 0.2);
}

.recommend-box li:hover {
  background-color: rgba(0, 0, 0, 0.14);
}

.recommend-box ul {
  float: left;
}

.recommend-box li a {
  color: #ffffff;
}

.recommend-box li:nth-child(3) {
  position: relative;
}

.R {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 1px;
  left: 37px;
}
</style>